import React, { Component } from 'react';
import {
  StyleSheet, Text, TouchableOpacity, FlatList, KeyboardAvoidingView, Platform,
  PixelRatio, View, Image, ScrollView, TextInput, RefreshControlBase
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import ToastUtil from '../../../utils/toast';
import { Loading } from '../../../component/page-status/Pageloading';
import { orderBaseStyle } from './_common/style.js'
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { CommonDialog } from '../../../components/common/Dialog';
import MethodUtil from "../../../utils/MethodUtil";


const scale = GLOBAL.SCALE;
const correct = require('../../../imgs/global/correct.png');
const searchIcon = require('../../../imgs/global/whiteSearch.png');


let sendData = {
  onrefresh: false,
  pageNo: 1,
  pageSize: 10,
  isLast: 0,
  searchKey: '',
};
export class projectListPage extends Component {
  static navigationOptions = ({ navigation }) => {
    const { orderInfo } = navigation.state.params;
    return {
      headerTitle: orderInfo.orderType === 'P' ? '销售计划关联' : '采购计划关联',
      headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} />,
      headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../imgs/goBackEmpty.png')} />),
      headerStyle: {  // 头部整体样式 
        elevation: 0,
        backgroundColor: '#f7f7f7',
        borderBottomWidth: 0
      },
      headerTitleStyle: {
        flex: 1,
        textAlign: 'center'
      }
    }
  };


  constructor(props) {
    super(props);
    const { orderInfo, orderMappingInfo } = props.navigation.state.params;
    console.log('orderMappingInfo-params', orderMappingInfo)
    console.log('orderInfo-params', orderInfo)
    this.state = {
      mappingList: [],
      orderMappingList: [],
      submitDisable: true,
      loading: false,
      loadIcon: false,  // 下拉涮新的 图标
      status: 'loading',
      isLast: false,
      modalVisible: false,
      itemNum: orderMappingInfo.lockedQuantity || 0,
      remark: ''
    }
    this.totalPage = 1;
    this.requesting = false;
    this.orderMappingInfo = orderMappingInfo;
    this.orderInfo = orderInfo;
    this.historySelect = {}; // 历史存储
  }

  componentWillMount() {
    this.getMappingList()
  }

  componentWillUnmount() {
    sendData.pageNo = 1;
    this.historySelect = {};
  }

  async getMappingList() {
    if (this.requesting) return;
    this.requesting = true;
    this.setState({
      loading: true,
      loadIcon: true
    })
    sendData.orderId = this.orderInfo.orderId;
    sendData.orderType = this.orderInfo.orderType;
    sendData.goodsId = this.orderInfo.goodsId;
    sendData.isLast = this.state.isLast ? 1 : 0;
    let respose = await HTTP.POST(API_GENERATE(API.USABLE_MAPPING_LIST), sendData);
    this.requesting = false;
    this.setState({
      loading: false,
      loadIcon: false
    })
    console.log("数据-respose", respose)
    //目前接口不支持分页
    if (respose) {
      // this.totalPage = respose.totalPage;
      // if (sendData.onrefresh) {  // 加载
      //   this.setState({
      //     mappingList: this.state.mappingList.concat(respose.rows),
      //     status: 'data'
      //   })
      // } else { // 刷新
      //   this.setState({
      //     mappingList: respose.rows,
      //     status: 'data'
      //   })
      // }

      // 初始化数据-前页数据带入并默认勾选
      respose && respose.length && respose.map((item, index) => {
        item.stockMappingList && item.stockMappingList.length && item.stockMappingList.map((subItem, i) => {
          const { stockMappingList } = this.orderMappingInfo || {};
          console.log("this.orderMappingInfo", this.orderMappingInfo)
          stockMappingList && stockMappingList.length && stockMappingList.map((paramsItem, index) => {
            if (subItem.orderInfo.orderId === paramsItem.orderInfo.orderId && subItem.orderInfo.batchNo === paramsItem.orderInfo.batchNo) {
              subItem.lockedTO.imgsStatus = true;
              subItem.lockedTO.imgsStatus = true;
              subItem.lockedTO.portKey = paramsItem.lockedTO.portKey;
              subItem.lockedTO.defaultLockedQuantity = paramsItem.lockedTO.lockedQuantity || 0;
              subItem.lockedTO.quantity = paramsItem.lockedTO.lockedQuantity || 0;
              this.historySelect[subItem.orderInfo.orderId] = subItem;
            }
          })

        })
      })
      console.log("this.historySelect", this.historySelect);

      let lsArr = [];
      if (!this.state.isLast) {
        if (respose && respose.length) { // 有数据
          lsArr = respose;
          for (key in this.historySelect) {
            let lsObj = { stockMappingList: [] };
            let item = this.historySelect[key];
            let groupName = item.orderInfo.companyName;
            let isSameIndex = this._isSame(lsArr, groupName);
            let findIndex = this._findChar(lsArr, item.orderInfo.orderId);
            console.log("this._findChar(lsArr, item.orderInfo.orderId)", this._findChar(lsArr, item.orderInfo.orderId))
            if (findIndex) {
              lsArr[findIndex.index].stockMappingList[findIndex.zIndex] = item;
              continue;
            }


            if (isSameIndex >= 0) { // 已经存在大的对象
              lsArr[isSameIndex].stockMappingList.push(item);
            } else { // 重新创建对象
              lsObj.groupName = groupName;
              lsObj.stockMappingList.push(item);
              lsArr.push(lsObj);
            }
          }
        } else {//无数据
          for (key in this.historySelect) {
            let lsObj = { stockMappingList: [] };
            let item = this.historySelect[key];
            let groupName = item.orderInfo.companyName;
            let isSameIndex = this._isSame(lsArr, groupName);
            if (isSameIndex >= 0) { // 已经存在大的对象
              lsArr[isSameIndex].stockMappingList.push(item);
            } else { // 重新创建对象
              lsObj.groupName = groupName;
              lsObj.stockMappingList.push(item);
              lsArr.push(lsObj);
            }
          }
          respose = lsArr;
        }
      }
      console.log("完结数据", respose)

      let itemNum = this._getNumber(respose);
      this.setState({
        mappingList: respose,
        status: 'data',
        itemNum,
      }, () => this.checkMapping())
    } else {
      this.setState({
        status: 'data'
      })
    }
  }

  //是否已经存在
  _isSame = (arr, groupName) => {
    let result = -1;
    arr.forEach((item, index) => {
      if (item.groupName == groupName) {
        result = index;
      }
    })
    return result;
  }

  _findChar = (arr, char) => {
    /* let result = false;
    arr && arr.forEach(item => {
      if (JSON.stringify(item).indexOf(char) != -1) {
        result = true;
      }
    })
    return result; */

    let result = null;
    arr && arr.forEach((item, index) => {
      item && item.stockMappingList.forEach((items, zIndex) => {
        if (items.orderInfo.orderId == char) {
          result = { index, zIndex };
        }
      })
    })

    return result;
  }




  //光标移出校验
  checkQuantity(quantity) {
    const { totalQuantity } = this.orderMappingInfo;
    const { itemNum } = this.state;
    let inputMapping = parseFloat(this.curItemInputText || 0);
    let onMapping = parseFloat(quantity)
    console.log('blur-inputMapping', inputMapping)
    if (inputMapping <= 0) {
      ToastUtil.showWarning('关联量必须大于0');
      return false;
    }
    if (inputMapping > onMapping) {
      ToastUtil.showWarning('关联量不能大于该批次待关联量');
      return false;
    }
    if (itemNum > totalQuantity) {
      ToastUtil.showWarning('已关联量不能大于总待关联量');
      return false;
    }
  }

  changeMapping(txt, productIndex, mappingIndex) {
    let itemNums = 0;
    const { mappingList } = this.state;
    let orderId = null;
    let isSelect = false;
    mappingList && mappingList.length && mappingList.map((item, index) => {
      const { stockMappingList } = item || {};
      stockMappingList && stockMappingList.length && stockMappingList.map((subItem, i) => {
        const { lockedTO, orderInfo } = subItem || {};
        if (productIndex === index && mappingIndex === i) {
          lockedTO.quantity = parseFloat(txt || 0);
          lockedTO.changeInput = true;
          isSelect = lockedTO.imgsStatus;
          orderId = orderInfo.orderId;

        }
        if (lockedTO.imgsStatus == true) {
          //itemNums += lockedTO.quantity;
          console.log("lockedTO.quantity-000", lockedTO.quantity)
          itemNums = MethodUtil.countObj.add(itemNums, lockedTO.quantity);
        }
      })
    })

    //如果勾选了 且输入
    if (orderId && this.historySelect[orderId] && isSelect) {
      this.historySelect[orderId].lockedTO.defaultLockedQuantity = txt;
      this.historySelect[orderId].lockedTO.quantity = txt;

      //待定
      /* if (this.orderMappingInfo && this.orderMappingInfo.stockMappingList && this.orderMappingInfo.stockMappingList.length) {
        this.orderMappingInfo.stockMappingList.map((item) => {
          if (item && item.lockedTO && (item.orderInfo.orderId == orderId)) {
            item.lockedTO.lockedQuantity = txt;
          }
          return item;
        })
      } */

    }

    this.setState({
      itemNum: itemNums,
    }, () => this.checkMapping())
  }

  //已关联量
  _getNumber = (sendData) => {
    let result = 0;
    sendData && sendData.length && sendData.forEach((item, index) => {
      const { stockMappingList } = item || {};
      stockMappingList && stockMappingList.forEach((items, indexs) => {
        if (items && items.lockedTO && items.lockedTO.imgsStatus) {
          result = MethodUtil.countObj.add(result, items.lockedTO.quantity);
        }
      })
    })
    return result;
  }

  //整理提交关联所需数据
  checkMapping() {
    const { mappingList } = this.state;
    const { orderId, orderType, batchNo, goodsId } = this.orderInfo;
    let orderMappingList = [];
    mappingList && mappingList.length && mappingList.map((item, index) => {
      const { stockMappingList } = item || {};
      stockMappingList && stockMappingList.length && stockMappingList.map((stockMappingItem, i) => {
        const { orderInfo, lockedTO } = stockMappingItem;
        if (lockedTO.imgsStatus) {
          let checkItem = {
            orderId,
            orderType,
            batchNo,
            goodsId,
            mappingOrderId: orderInfo.orderId,
            mappingBatchNo: orderInfo.batchNo,
            mappingQuantity: lockedTO.quantity || 0,
            portKey: lockedTO.portKey,
            ywType: orderInfo.ywType
          }
          orderMappingList.push(checkItem);
        }
      })
    })
    this.setState({
      orderMappingList,
      submitDisable: orderMappingList && orderMappingList.length > 0 ? false : true
    })
  }

  //仅查看上次关联
  checkLast() {
    this.setState({
      isLast: !this.state.isLast,
    }, async () => {
      await this.getMappingList();

      //仅查看上次关联，默认全部勾选
      let itemNums = 0;
      let { mappingList } = this.state;
      if (this.state.isLast) {
        mappingList && mappingList.length && mappingList.map((item, index) => {
          const { stockMappingList } = item || {};
          stockMappingList && stockMappingList.length && stockMappingList.map((subItem, i) => {
            const { lockedTO } = subItem || {};
            lockedTO.imgsStatus = true;
            //itemNums += lockedTO.quantity
            itemNums = MethodUtil.countObj.add(itemNums, lockedTO.quantity);
          })
        })
      }

      itemNums = this._getNumber(mappingList);

      this.setState({
        mappingList,
        itemNum: itemNums
      }, () => this.checkMapping())
    })
  }

  // 添加按钮
  async _addFn() {
    if (this.state.loading) { return; }
    this.setState({ loading: true });
    if (this.variData()) {
      const response = await HTTP.POST(API_GENERATE(API.LOCAL_ADD_MAPPING_LIST), this.state.orderMappingList);
      this.setState({
        loading: false
      })
      if (response) {
        this.props.navigation.state.params.callBack();
        this.props.navigation.goBack();
      }
    } else {
      this.setState({ loading: false });
      return false;
    }
  }

  variData() {
    const { totalQuantity, groupName } = this.orderMappingInfo;
    const { mappingList, itemNum } = this.state;
    //校验关联总和
    for (let i = 0; i < mappingList.length; i++) {
      const { stockMappingList } = mappingList[i] || {};
      for (let j = 0; j < stockMappingList.length; j++) {
        const { lockedTO, orderInfo } = stockMappingList[j] || {};
        if (lockedTO.imgsStatus) {
          if (lockedTO.quantity == 0) {
            ToastUtil.showWarning(`${orderInfo.ywType == 'ZXY' ? orderInfo.orderId : orderInfo.batchNo}批次关联量不能为0！`);
            return false;
          } else if (lockedTO.quantity > lockedTO.availableQuantity) {
            ToastUtil.showWarning(`${orderInfo.ywType == 'ZXY' ? orderInfo.orderId : orderInfo.batchNo}批次关联量不能大于可关联量！`);
            return false;
          }
        }
      }
    }
    if (itemNum > totalQuantity) {
      ToastUtil.showWarning(`${groupName}已关联量不能大于总待关联量！`);
      return false;
    }

    return true;
  }

  // 下拉更新函数
  _isLoadRefresh() {
    if (this.requesting) return;
    sendData.pageNo = 1;
    sendData.onrefresh = false,
      this.getMappingList();
  }

  //上拉加载
  _loadData() {
    if (this.requesting) return;
    if (this.totalPage > sendData.pageNo) {
      sendData.pageNo++;
      sendData.onrefresh = true;
      this.getMappingList();
    }
  }

  // 刷新页面
  reloadPage() {
    sendData.pageNo = 1;
    sendData.onrefresh = true;
    this.getMappingList();
  }

  _renderToastWrap = () => {
    const { remark } = this.state;
    return (
      <View>
        <Text>{remark || '-'}</Text>
      </View>
    )
  }

  _renderItem(data) {
    let { groupName, stockMappingList } = data.item;
    let { itemNum, mappingList } = this.state;
    return (
      <View style={styles.flexBox}>
        <View style={styles.flexBusiness}>
          <Text style={styles.flexBusinessName}>
            {groupName || '--'}
          </Text>
        </View>
        <View style={{ padding: 10 * scale }}>
          {
            stockMappingList && stockMappingList.length ?
              stockMappingList.map((item, index) => {
                let { lockedTO, orderInfo, deliveryPlanList } = item;
                let { lockedQuantity, availableQuantity, contractQuantity, onhandQuantity, shippedQuantity, ledgerLockedQuantity, defaultLockedQuantity } = lockedTO || {};
                let { orderId, batchNo, price, srcAddressName, destAddressName, auditRemark, remark, currency, originPrice, ywType, deliveryBeginDate, deliveryEndDate, quantity } = orderInfo || {};
                let salesQuantities = this.orderInfo.orderType === 'S' ?
                  `合同量：${contractQuantity || '-'}吨 | 实物库存量：${onhandQuantity || '-'}吨 | 在途量：${shippedQuantity || '-'}吨 | 已锁定量：${ledgerLockedQuantity || '-'}吨 | 已关联量：${lockedQuantity || '-'}吨`
                  : `合同量(含溢短装)：${contractQuantity || '-'}吨 | 已关联量：${lockedQuantity || '-'}吨`
                return (
                  <View style={styles.itemBox} key={index}>
                    <View style={[styles.contian, (index + 1) !== stockMappingList.length ? styles.xian : null]}>
                      <TouchableOpacity style={styles.titleBox} onPress={() => {
                        lockedTO.imgsStatus = !lockedTO.imgsStatus;
                        lockedTO.quantity = lockedTO.quantity || 0;
                        if (lockedTO.imgsStatus == true) {
                          //itemNum += lockedTO.quantity
                          itemNum = MethodUtil.countObj.add(itemNum, lockedTO.quantity);
                          this.historySelect[orderId] = item;
                        } else {
                          //itemNum -= lockedTO.quantity
                          itemNum = MethodUtil.countObj.subtract(itemNum, lockedTO.quantity);
                          delete this.historySelect[orderId];
                        }
                        console.log("勾选-historySelect", this.historySelect);
                        this.setState({
                          itemNum,
                          mappingList
                        }, () => this.checkMapping())
                      }}>
                        <View style={[styles.lockView, { marginBottom: 3 * scale }]}>
                          {lockedTO.imgsStatus ? (
                            <Image style={styles.lockImage} source={correct} />
                          ) : null
                          }
                        </View>
                        <View style={styles.ctTitle} onPress={() => { this.props.navigation.navigate('OrderDetailsPage', { orderId }) }}>
                          <Text style={styles.colorTheme}>{ywType == 'ZXY' ? '新油采购单号' : '批次：'}</Text>
                          <Text style={styles.colorTheme}>{(ywType == 'ZXY' ? orderId : batchNo) || '-'}</Text>
                        </View>
                      </TouchableOpacity>

                      <View style={styles.ctInputBox}>
                        <Text style={styles.colorTheme}>本次关联：</Text>
                        <TextInput
                          style={styles.ctInput}
                          keyboardType='numeric'
                          defaultValue={(defaultLockedQuantity || 0) + ''}
                          onBlur={() => this.checkQuantity(availableQuantity)}
                          onChangeText={(txt) => { this.changeMapping(txt, data.index, index); this.curItemInputText = txt; }} />
                        <Text style={styles.ctInputText} >吨</Text>
                      </View>
                      <Text style={styles.flexMeberName}>¥{price}/吨{currency !== 'RMB' ? `（美金金额：$${originPrice}美元/吨）` : ''} | 可关联量：{availableQuantity || 0}吨</Text>
                      {
                        ywType == 'ZXY' ?
                          <View style={styles.flexData}>
                            <Text style={styles.flexVaule}>最晚装船日：</Text>
                            <Text style={styles.flexVaule}>{deliveryBeginDate}-{deliveryEndDate}</Text>
                          </View>
                          : <View>
                            <View style={styles.flexData}>
                              <Text style={styles.flexVaule}>{salesQuantities}</Text>
                            </View>
                            <View style={styles.flexData}>
                              <Text style={styles.flexVaule}>交货期：</Text>
                              {
                                deliveryPlanList && deliveryPlanList.map((deliveryPlanItem, indexDp) => {
                                  let { deliveryBeginDate, deliveryEndDate, quantity } = deliveryPlanItem || {};
                                  return (
                                    <Text key={indexDp} style={styles.flexVaule}>{deliveryBeginDate}-{deliveryEndDate} {quantity}吨</Text>
                                  )
                                })
                              }
                            </View>
                          </View>
                      }

                      <View style={styles.flexData}>
                        <Text style={styles.flexVaule}>出库地：</Text>
                        <Text style={styles.flexVaule}>{srcAddressName || '-'}</Text>
                      </View>
                      <View style={styles.flexData}>
                        <Text style={styles.flexVaule}>目的地：</Text>
                        <Text style={styles.flexVaule}>{destAddressName || '-'}</Text>
                      </View>
                      <View style={styles.flexData}>
                        <Text style={styles.flexVaule}>送审备注：{auditRemark || '-'}</Text>
                      </View>
                      {
                        ywType !== 'ZXY' ? <View style={styles.flexData}>
                          <Text style={styles.flexVaule}>合同备注：</Text>
                          <View style={styles.flexTitle}>
                            <Text style={styles.flexVaule}>{remark && remark.length > 16 ? `${remark.substring(0, 16)}...` : (remark || '-')}</Text>
                            {remark && remark.length > 16 ? <Text style={styles.titleNum} onPress={() => { this.setState({ modalVisible: true, remark }) }}>{'更多>>'}</Text> : null}
                          </View>
                        </View> : null
                      }
                    </View>
                  </View>
                )
              }) : <Text style={styles.nullText}>无可关联订单</Text>
          }
        </View>
      </View>
    )
  }

  render() {
    const { groupName, totalQuantity } = this.orderMappingInfo;
    const { companyName, orderType } = this.orderInfo;
    const { mappingList, submitDisable, loading, status, modalVisible, itemNum, isLast } = this.state;
    return (
      <View style={styles.container}>
        <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : null} keyboardVerticalOffset={20} >
          <View style={[styles.headBox, styles.itemBox, styles.xian]}>
            <Text style={styles.headTitle}>{groupName || '-'} </Text>
            <View style={styles.flexNameMeber}>
              <Text style={styles.ctItemText}>{companyName && companyName.length > 6 ? `${companyName.substring(0, 6)}...` : (companyName || '-')}</Text>
              <Text style={styles.ctItemText}>已关联: {(itemNum || 0).toFixed(3) || 0} 吨</Text>
              <Text style={styles.ctItemText}> 待关联: {parseFloat(totalQuantity - itemNum).toFixed(3) || 0} 吨</Text>
            </View>
          </View>
          <View style={[styles.flexRow, { marginTop: 13 * scale, justifyContent: 'space-between', alignItems: 'center' }]}>
            <View style={{ marginLeft: 10 * scale }}>
              <TouchableOpacity style={{ position: 'absolute', right: 10 * scale, top: 6 * scale, zIndex: 9 }} onPress={() => this.reloadPage()}>
                < Image source={searchIcon} style={styles.searchIcon} />
              </TouchableOpacity>
              <TextInput
                ref="enterpriseInput"
                style={styles.searchInput}
                underlineColorAndroid='transparent'
                placeholder={"请输入企业/单号"}
                placeholderTextColor="#000"
                maxLength={30}
                returnKeyType={'search'}
                defaultValue={sendData.searchKey}
                onChangeText={(txt) => { sendData.searchKey = txt; }}
                onSubmitEditing={() => { this.reloadPage(); }}
              />
            </View>
            <TouchableOpacity style={[styles.flexRow, { alignItems: 'center' }]} onPress={() => this.checkLast()}>
              <View style={styles.lockView}>
                {isLast ? (
                  <Image style={styles.lockImage} source={correct} />
                ) : null
                }
              </View>
              <Text style={{ color: '#000', fontSize: 11 }}>仅查上次绑定批次</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.flexMeber}>
            <Text style={styles.flexNum}>*执行中前：可关联量= 订单量（不含溢装量）-绑定量</Text>
            <Text style={styles.flexNum}>*执行中：可关联量= {orderType === 'S' ? '(合同量+实物库存量+在途量)-已锁定量-已关联量' : '合同量-绑定量'}</Text>
          </View>
          {
            status == 'data' ? <ScrollView style={styles.flatList}>
              {
                mappingList && mappingList.length ?
                  // <FlatList
                  //   data={mappingList}
                  //   renderItem={(data) => this._renderItem(data)}
                  //   refreshing={this.state.loadIcon}
                  //   onRefresh={this._isLoadRefresh.bind(this)}
                  //   onEndReachedThreshold={1}
                  //   onEndReached={() => { this._loadData() }}
                  // />
                  mappingList.map((item, index) => {
                    return (
                      <View key={index} style={{ marginTop: 20 * scale }}>
                        {this._renderItem({ item, index })}
                      </View>
                    )
                  })
                  : <Text style={styles.nullText}>无可关联订单</Text>
              }
            </ScrollView> : null
          }

          <View style={styles.btnBoxs}>
            {/* <Text style={styles.btnBoxsName}>本次选则关联量 {itemNum || 0}吨</Text> */}
            <TouchableOpacity disabled={submitDisable} style={[styles.btn, { backgroundColor: submitDisable ? style.color.gray : style.color.themeColor }]} onPress={() => { this._addFn() }}>
              <Text style={styles.btnText}>添加</Text>
            </TouchableOpacity>
          </View>
        </KeyboardAvoidingView>
        <CommonDialog modalVisible={modalVisible} title={'合同备注'} renderCustom={this._renderToastWrap} onClosePress={() => { this.setState({ modalVisible: false }) }} />

        {
          loading ? (<View style={orderBaseStyle.statusStyle}><Loading /></View>) : null
        }
      </View >
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f7f7f7',
    paddingLeft: 12 * scale,
    paddingRight: 12 * scale
  },
  flexRow: {
    display: 'flex',
    flexDirection: 'row'
  },
  lockView: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    height: 12 * scale,
    width: 12 * scale,
    borderWidth: 1 * scale,
    borderColor: '#0E7FFD',
    marginLeft: 14 * scale,
    marginRight: 5 * scale,
  },
  lockImage: {
    tintColor: '#0E7FFD',
    width: 8 * scale,
    height: 6 * scale
  },
  searchIcon: {
    width: 19 * scale,
    height: 19 * scale,
    opacity: 0.8,
    tintColor: '#0088FE',
  },
  searchInput: {
    height: 32 * scale,
    width: 210 * scale,
    textAlign: 'center',
    paddingRight: 12 * scale,
    paddingTop: 8 * scale,
    paddingBottom: 8 * scale,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 0,
    position: 'relative',
    borderRadius: 18 * scale,
    color: '#000',
    opacity: 0.5,
    fontSize: 13 * scale,
    borderWidth: 1 / PixelRatio.get(),
    borderStyle: 'solid',
    borderColor: "#0088FE",
  },
  xian: {
    borderBottomWidth: 1 / PixelRatio.get(),
    borderStyle: 'solid',
    borderBottomColor: style.color.gray,
  },
  flexBox: {
    width: '100%'
  },
  itemBox: {
    width: '100%',
    borderRadius: 4 * scale
  },
  flexBusiness: {
    flexDirection: 'row',
    paddingLeft: 10 * scale
  },
  flexBusinessName: {
    color: '#000',
    fontSize: 11 * scale,
  },
  flexMeber: {
    paddingTop: 12 * scale,
    paddingLeft: 10 * scale
  },
  flexNum: {
    flexDirection: 'row',
    fontSize: 10 * scale,
    color: '#9C9C9C',

  },
  flexMeberNum: {
    flexDirection: 'row',
    fontSize: 10 * scale,
    color: '#9C9C9C',
    paddingLeft: 15 * scale,
  },
  contian: {
    paddingTop: 10 * scale,
    paddingBottom: 10 * scale,
    position: 'relative',
    backgroundColor: '#fff'
  },
  flatList: {
    width: '100%',
    height: '100%',
    flex: 1,
    paddingBottom: 20 * scale
  },
  flexNameMeber: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  ctItemText: {
    fontSize: 12 * scale,
    marginTop: 8 * scale
  },
  nullText: {
    fontSize: 13 * scale,
    marginTop: 18 * scale,
    textAlign: "center"
  },
  btnBoxs: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingLeft: 19 * scale,
    paddingRight: 28 * scale,
    paddingBottom: 20 * scale,
    paddingTop: 20 * scale
  },
  btnBoxsName: {
    color: '#000',
    fontSize: 11 * scale,
  },
  btn: {
    width: 160 * scale,
    height: 30 * scale,
    marginLeft: 20 * scale,
    backgroundColor: style.color.themeColor,
    borderRadius: 20 * scale,
  },
  btnText: {
    lineHeight: 30 * scale,
    textAlign: 'center',
    color: style.color.white,
  },
  bombImg: {
    // marginTop: 2 * scale,
    marginRight: 5 * scale,
    width: 12 * scale,
    height: 12 * scale,
  },
  headBox: {
    paddingBottom: 16 * scale
  },
  headTitle: {
    fontSize: 15 * scale,
    fontWeight: 'bold',
    color: style.color.black,
    marginBottom: 8 * scale
  },
  colorActive: {
    color: style.color.lightRed
  },
  ctTitle: {
    flexDirection: 'row',
    paddingRight: 10 * scale,
    flexWrap: 'wrap',
    marginTop: -2 * scale,
    alignItems: 'center',
    // lineHeight: 26 * scale
  },
  colorLine: {
    marginTop: -2 * scale,
  },
  colorTheme: {
    color: '#000',
    opacity: 0.9,
    fontSize: 11 * scale,
  },
  felxTet: {
    // fontSize: 11 * scale,
    marginLeft: 17 * scale,
    // color: '#000',
    // opacity: 0.9,
  },
  titleBox: {
    flexDirection: 'row',
    // alignItems: 'center'
  },
  flexMeberName: {
    marginLeft: 21 * scale,
    fontSize: 10 * scale,
    color: '#E02020',
  },
  ctInputBox: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingTop: 8 * scale,
    paddingBottom: 8 * scale,
    paddingLeft: 21 * scale,
  },
  ctInput: {
    fontSize: 12 * scale,
    borderWidth: 1 / PixelRatio.get(),
    borderStyle: 'solid',
    borderColor: style.color.gray,
    height: 18 * scale,
    width: 43 * scale,
    marginRight: 5 * scale,
    paddingVertical: 0,
    textAlign: 'center',
    color: '#060606',
  },
  ctInputText: {
    color: '#060606',
    fontSize: 12 * scale,
  },
  ctInputTextRed: {
    color: style.color.lightRed
  },
  money: {
    paddingLeft: 15 * scale
  },
  flexLine: {
    height: 1 * scale,
    borderWidth: 1 / PixelRatio.get(),
    borderStyle: 'solid',
    borderColor: style.color.gray,
  },
  flexData: {
    flexDirection: 'row',
    paddingLeft: 21 * scale,
    paddingRight: 10 * scale,
    marginTop: 10 * scale,
  },
  flexVaule: {
    fontSize: 10 * scale,
    color: '#000',
    opacity: 0.6,
  },
  flexTitle: {
    flexDirection: 'row',
  },
  titleNum: {
    fontSize: 10 * scale,
    color: '#0091FF',
    opacity: 0.7,
  },
})